<template>
  <!-- 机构树 -->
  <div class="module_par">
    <el-row class="con" :gutter="20">
      <el-col :span="5">
        <div class="con-left">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :expand-on-click-node="false"
            :default-expand-all="true"
            class="tree_con"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <i class="el-icon-menu" v-if="data.code == 'T'"></i>
              <i class="el-icon-office-building" v-if="data.code == 'O'"></i>
              <i class="el-icon-school" v-if="data.code == 'D'"></i>
              <i class="el-icon-user" v-if="data.code == 'P'"></i>
              {{ node.label }}
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="con-right">
          <el-row :gutter="20" class="con-right-top">
            <el-col :span="8">
              <span class="tit">{{ tit }}</span>
            </el-col>
            <el-col :span="16" style="text-align: right;" v-if="dataList.code">
              <!-- <el-button
                type="primary"
                class="searchBtn"
                @click="addDataSta()"
                size="small"
                v-if="dataList.code == ''"
              >新增</el-button> -->
              <el-button
                type="primary"
                class="searchBtn"
                @click="addDataSta()"
                size="small"
                v-if="dataList.code != 'T'"
              >新增</el-button>
              <!-- <el-button
                type="primary"
                class="searchBtn"
                @click="addDataUser()"
                size="small"
                v-if="dataList.code == 'P'"
              >新增</el-button> -->
              <el-button type="primary" class="searchBtn" @click="editData()" size="small" v-if="dataList.parentId != parentId && dataList.code != 'T'">编辑</el-button>
              <el-button type="primary" class="searchBtn" @click="deleData()" size="small" v-if="dataList.parentId != parentId && dataList.code != 'T'">删除</el-button>
            </el-col>
          </el-row>
          <div class="con-right-bot">
            <el-table :data="tableData" border tooltip-effect="dark" style="width: 100%" v-if="dataList.code == 'P'">
              <el-table-column prop="userName" align="center" label="用户名"></el-table-column>
              <el-table-column prop="userCode" align="center" label="用户码"></el-table-column>
              <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
              <el-table-column prop="updateTime" align="center" label="修改时间"></el-table-column>
              <!-- <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="editData(scope.row)">编辑</el-button>
                </template>
              </el-table-column>-->
            </el-table>
            <el-table :data="tableData" border tooltip-effect="dark" style="width: 100%" v-if="dataList.code == 'O'">
              <el-table-column prop="name" align="center" label="机构名"></el-table-column>
              <el-table-column prop="createTime" align="center" label="创建人"></el-table-column>
              <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
              <el-table-column prop="createTime" align="center" label="修改人"></el-table-column>
              <el-table-column prop="updateTime" align="center" label="修改时间"></el-table-column>
              <!-- <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="editData(scope.row)">编辑</el-button>
                </template>
              </el-table-column>-->
            </el-table>
            <!-- <el-pagination
              v-show="total>0"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[5, 10, 15, 420]"
              :page-size="tableQuery.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>-->
          </div>
          <div class="con-right-pag">
            <el-pagination
              v-show="total>0"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[5, 10, 15, 420]"
              :page-size="tableQuery.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 新增 -->
    <el-dialog title="新增" :visible.sync="dialogAddSta">
      <el-form :model="addList" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <span class="searchTxt">类型选择:</span>
            <el-select v-model="addList.type" placeholder="请选择" size="small">
              <el-option
                v-for="item in addList.optionType"
                :key="item.optionValue"
                :label="item.optionName"
                :value="item.optionValue"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="12">
            <span class="searchTxt">{{ addList.type }}名称:</span>
            <el-input v-model="addList.name" autocomplete="off" size="small" class="searchInp"></el-input>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddSta = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addYes" size="small">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增人 -->
    <el-dialog title="新增用户" :visible.sync="dialogAddUserSta">
      <el-form :model="addListUser" label-width="100px">
        <el-row :gutter="20">
          <el-row>
            <el-col>
              <el-form-item label="用户选择">
                <el-select v-model="addListUser.user" multiple placeholder="请选择">
                  <el-option
                    v-for="item in addListUser.option"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddUserSta = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addUserYes" size="small">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="dialogEditSta">
      <el-form :model="editList" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <span class="searchTxt">名称:</span>
            <el-input v-model="editList.name" autocomplete="off" size="small" class="searchInp"></el-input>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditSta = false" size="small">取 消</el-button>
        <el-button type="primary" @click="editYes" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // T  根节点   O  机构  D 部门    P 岗位  code判断
  data () {
    return {
      permissionList: {
        cx: false,
        xz: false,
        bj: false,
        tj: false,
        sc: false
      },
      dataList: {},
      treeData: [],
      defaultProps: {
        children: 'subGroup',
        label: 'name'
      },
      tit: '',
      dialogAddSta: false,
      dialogAddUserSta: false,
      addList: {
        name: '',
        type: '',
        optionType: []
      },
      total: 0,
      tableQuery: {
        limit: 5,
        indexNo: 0
      },
      addListUser: {
        user: [],
        option: []
      },
      tableUserList: [],
      tableData: [],
      dialogEditSta: false,
      editList: {
        name: ''
      },
      parentId: ''
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(val)
      this.tableQuery.limit = val
      this.tableQuery.indexNo = 0
      this.getByNodeId(this.dataList.id, this.dataList)
    },
    handleCurrentChange (val) {
      this.tableQuery.indexNo = val - 0 - 1
      this.getByNodeId(this.dataList.id, this.dataList)
    },
    editData () {
      this.editList.name = this.dataList.name
      this.dialogEditSta = true
    },
    editYes () {
      if (!this.editList.name) {
        this.$message.error('请输入名称')
        return false
      }
      // eslint-disable-next-line no-unused-vars
      let data
      // eslint-disable-next-line no-unused-vars
      if (this.dataList.code == 'P') {
        data = {
          nodeType: 'P',
          postDTO: {
            id: this.dataList.id,
            tenantCode: localStorage.getItem('TENANT_CODE'),
            postName: this.editList.name,
            parentId: this.dataList.parentId,
            lft: this.dataList.lft,
            rgt: this.dataList.rgt
          }
        }
      } else if (this.dataList.code == 'O') {
        data = {
          nodeType: 'O',
          organizationDTO: {
            id: this.dataList.id,
            tenantCode: localStorage.getItem('TENANT_CODE'),
            name: this.editList.name,
            type: this.dataList.type,
            parentId: this.dataList.parentId,
            lft: this.dataList.lft,
            rgt: this.dataList.rgt
          }
        }
      }
      this.$requestA.put('/tree', data, res => {
        this.dialogEditSta = false
        if (res.code == '200') {
          this.getTreeList()
          this.$message.success('操作成功')
        }
      })
    },
    deleData () {
      // const data = {
      //   nodeId: this.dataList.id
      // }
      this.$confirm('确定要删除数据吗？', '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        this.$requestA.dele('/tree/' + this.dataList.id, {}, res => {
          this.getTreeList()
          if (res.code == '200') {
            this.$message.success('删除成功')
          }
        })
      })
      // this.$requestA.dele('/tree/deleteNode/' + this.dataList.id, {}, res => {
      //   this.getTreeList()
      // })
    },
    getUserList () {
      const data = {
        tenantCode: localStorage.getItem('TENANT_CODE')
      }
      this.$requestA.get('/user', data, res => {
        for (const key in res.data.content) {
          this.addListUser.option.push({
            value: res.data.content[key].id,
            label: res.data.content[key].userName
          })
          if (this.tableUserList.length) {
            for (const key2 in this.tableUserList) {
              if (this.tableUserList[key2].userCode == res.data.content[key].userCode) {
                this.addListUser.user.push(res.data.content[key].id)
              }
            }
          }
        }
        this.dialogAddUserSta = true
      })
    },
    getTableUserList () {
      const data = {
        postId: this.dataList.id
      }
      this.$requestA.get('/post/queryUserByPostId', data, res => {
        this.tableUserList = res.data || []
        this.tableData = res.data || []
      })
    },
    addUserYes () {
      console.log(this.addListUser.user)
      const data = {
        postId: this.dataList.id,
        userIdList: this.addListUser.user
      }
      this.$requestA.post('/relationship/addUPRelation', data, res => {
        this.dialogAddUserSta = false
        this.getByNodeId(this.dataList.id)
        if (res.code == '200') {
          this.$message.success('操作成功')
        }
      })
    },
    addDataUser () {
      this.addListUser = {
        option: [],
        user: []
      }
      this.getUserList()
    },
    addYes () {
      if (!this.addList.type) {
        this.$message.error('请选择类型')
        return false
      }
      if (!this.addList.name) {
        this.$message.error('请输入名称')
        return false
      }
      // 新增
      if (this.addList.type == '机构') {
        const data = {
          nodeType: 'O',
          organizationDTO: {
            tenantCode: localStorage.getItem('TENANT_CODE'),
            name: this.addList.name,
            parentId: this.dataList.id
          }
        }
        this.$requestA.post('/tree', data, res => {
          console.log(res)
          this.getTreeList()
          this.dialogAddSta = false
          if (res.code == '200') {
            this.$message.success('操作成功')
          }
        })
      } else if (this.addList.type == '岗位') {
        const data = {
          nodeType: 'P',
          postDTO: {
            tenantCode: localStorage.getItem('TENANT_CODE'),
            postName: this.addList.name,
            parentId: this.dataList.id
          }
        }
        this.$requestA.post('/tree', data, res => {
          console.log(res)
          this.getTreeList()
          this.dialogAddSta = false
          if (res.code == '200') {
            this.$message.success('操作成功')
          }
        })
      }
    },
    addDataSta () {
      this.addList.optionType = []
      this.addList.type = ''
      this.addList.name = ''
      if (this.dataList.code == 'P') {
        this.addList.optionType = [
          {
            optionValue: '岗位',
            optionName: '岗位'
          }
        ]
        this.dialogAddSta = true
      } else if (this.dataList.code == 'O') {
        this.addList.optionType = [
          {
            optionValue: '机构',
            optionName: '机构'
          }
        ]
        this.dialogAddSta = true
      }
    },
    handleNodeClick (data) {
      console.log(data)
      this.dataList = data
      this.tit = data.name
      this.tableData = []
      this.tableQuery.limit = 5
      this.tableQuery.indexNo = 0
      this.total = 0
      if (this.dataList.code == 'T' && this.dataList.parentId == localStorage.getItem('TENANT_ID')) {
        // this.parentId = localStorage.getItem('TENANT_ID')
        return false
      } else {
        this.parentId = this.treeData[0].id
      }

      // if (this.dataList.code == 'P') {
      //   this.getTableUserList()
      // } else {
      this.getByNodeId(data.id, data)
      // }
    },
    getByNodeId (id, val) {
      const data = {
        nodeId: id,
        size: this.tableQuery.limit,
        page: this.tableQuery.indexNo
      }
      // eslint-disable-next-line no-unused-vars
      let url
      if (val.code == 'O') {
        url = '/tree/queryOrgByNodeId'
      } else if (val.code == 'P') {
        url = '/tree/queryUserByNodeId'
      }
      this.$requestA.get(url, data, res => {
        // this.tableUserList = res.data || []
        this.tableData = res.data.content || []
        this.total = res.data.totalElements
        if(!val){
          this.getTreeList()
        }
      })
    },
    getTreeList () {
      const data = {
        parentId: localStorage.getItem('TENANT_ID')
      }
      this.$requestA.get('/tree', data, res => {
        console.log(res)
        this.treeData = res.data
      })
    }
  },
  created () {
    this.parentId = localStorage.getItem('TENANT_ID')
    this.getTreeList()
  }
}
</script>

<style scoped>
@import '../../assets/css/base.css';
.con {
  /* margin-top: 10px;
  padding: 0 24px; */
}
.con-left {
  width: 100%;
  height: 78vh;
  background-color: #fff;
  overflow: hidden;
  overflow-y: scroll;
  /* padding: 20px 15px; */
}
.tree_con{
  padding:20px 15px;
}
/*修改滚动条样式*/
.con-left::-webkit-scrollbar {
  width: 6px;
  height: 100%;
}
.con-left::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
.con-left::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
.con-left::-webkit-scrollbar-thumb:hover {
  background: #333;
}
.con-left::-webkit-scrollbar-corner {
  background: #179a16;
}
.con-right {
  width: 100%;
  height: 78vh;
  background-color: #fff;
}
.con-right-top {
  padding: 20px;
  border-bottom: 2px solid #f0f2f5;
}
.con-right-bot {
  max-height: 60vh;
  padding: 0 30px ;
  padding-top: 20px;
  overflow: hidden;
  overflow-y: scroll;
}
/*修改滚动条样式*/
.con-right-bot::-webkit-scrollbar {
  width: 6px;
  height: 100%;
}
.con-right-bot::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
.con-right-bot::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
.con-right-bot::-webkit-scrollbar-thumb:hover {
  background: #333;
}
.con-right-bot::-webkit-scrollbar-corner {
  background: #179a16;
}
.tit {
  display: inline-block;
  width: 100%;
  font-size: 18px;
  color: black;
}
.custom-tree-node i {
  color: #0d78be;
}
.con-right-pag {
  position: absolute;
  bottom: 3vh;
  /* width: 100%; */
  padding-left: 23%;
}
</style>
